<!--
 * @Description:
 * @Author: oscar
 * @Date: 2021-12-16 11:36:54
-->
<template>
  <div class="search-bar">
  <!-- 表单查询 -->
    <el-form
      :inline="true"
      size="small"
      :model="searchForm"
      class="json-table-form"
      :inline-message="true"
      ref="formRef"
    >
      <el-form-item
        class="search-item"
        v-for="(item, index) in searchColumnsList"
        :key="item.prop + index"
        :label="item.label"
        :prop="item.prop"
      >
        <!-- input -->
        <el-input
          v-if="!(item.isSelect || item.isTime || item.isCascader)"
          :clearable="item.clearable"
          v-model.trim="searchForm[item.prop]"
          :placeholder="item.placeholder || '请输入内容'"
          @change="handleChange"
        >
        </el-input>
        <!-- select -->
        <el-select
          v-if="item.isSelect"
          :clearable="item.clearable"
          filterable
          v-model="searchForm[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          @change="handleChange"
        >
          <el-option
            v-for="(option, optionInd) in item.options"
            :key="option.id + optionInd"
            :label="option.name"
            :value="option.id"
          >
          </el-option>
        </el-select>

        <!-- cascader -->
        <el-cascader
          v-if="item.isCascader"
          v-model="searchForm[item.prop]"
          :clearable="item.clearable"
          :options="item.options"
          @change="handleChange"
          :placeholder="item.placeholder || '请选择'"
        >
        </el-cascader>
        <!-- date -->
        <el-date-picker
          v-if="item.isTime === 'date'"
          v-model="searchForm[item.prop]"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
          @change="
            val => {
              formatDate(val, searchForm, item.prop);
            }
          "
        >
        </el-date-picker>

        <!-- datetimerange -->
        <el-date-picker
          v-if="item.isTime === 'datetimerange'"
          v-model="searchForm[item.prop]"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          @change="
            val => {
              formatDate(val, searchForm, item.prop);
            }
          "
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="submit-btn">
        <el-button type="primary" @click="handleSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCompanyList } from '@/api/company'
import { reactive, ref, onMounted, watch, nextTick } from "vue";
import dayjs from "dayjs";

export default {
  name: 'search-component',
  props: {
    searchColumns: Array,
    service: Object,
    tableColumns: Array,
    options: Object
  },
  emits: ["searchSubmit"],
  setup(props, { emit }) {
    console.log('search component init...')
    // 初始化属性
    let searchForm = reactive({}); // 初始化表单项
    let qidIndex = 0
    props.searchColumns.forEach((item, index) => {
      if(item.prop === 'qid') {
        qidIndex = index
      }
        searchForm[item.prop] = "";
    });

    // 获取企业列表
    function getCompanyData() {
      const param = {
        p: 1,
        limit: 200
      }
      getCompanyList(param).then(res => {
        console.log('getcompanyList success')
        // props.searchColumns[qidIndex]['options'] = res.list
      })
    }
    if(qidIndex > 0) {
      getCompanyData()
    }

    const isLoading = ref(false); // 控制loading
    // 提交搜索
    let handleSubmit = () => {
      isLoading.value = true;
      let params = searchForm
      emit("searchSubmit", params)
    }

    return {
      searchForm,
      dayjs, // 处理日期格式
      searchColumnsList: props.searchColumns, // 传递的配置数据
      handleSubmit //
    }
  },
}
</script>